<template>
  <div>
    <el-menu  class="el-menu-demo" mode="horizontal" >
      <el-menu-item index="1"><h2><b>月收入统计</b></h2></el-menu-item>
    </el-menu>

<el-row>
<el-col :span="14">
日期
    <el-date-picker
        v-model="gaocha.sta"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
    </el-date-picker>
    至
    <el-date-picker
        v-model="gaocha.ends"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
    </el-date-picker>
    <el-button @click="onsubmit()"  type="primary" round>检索</el-button>
  </el-col>
<el-col :span="10">
    <el-button  @click="yigeyue()"><b>近一个月</b></el-button>
    <el-button @click="sangeyue()"><b>近三个月</b></el-button>
    <el-button @click="bannian()"><b>近半年</b></el-button>
    <el-button @click="yinian()"><b>近一年</b></el-button>
</el-col>
</el-row>



    <div v-show="showANDhidden">
    <div><h2 align="center">心心念念律师事务所职业人员财务清单</h2></div>
      <el-row>
  <el-col :span="3">执业人员:<b>{{userRealname}}</b></el-col>
  <el-col :span="2">日期:</el-col>
  <el-col :span="2"><b>{{gaocha.sta}}</b></el-col>
  <el-col :span="1"><b>至</b></el-col>
  <el-col :span="2"><b>{{gaocha.ends}}</b></el-col>
      </el-row>
      <br>
      <el-row >
        <el-col :span="24"><b>律师日期内创收</b></el-col>
      </el-row>
<br>

      <el-table
          :summary-method="getSummaries"
          show-summary
          :data="tableData"
          style="width: 100%"
         >
        <el-table-column
            prop=""
            label="承办律师"
            width="180">
          <template>
            {{userRealname}}
          </template>
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="caseWtr"
            label="委托人">
        </el-table-column>
        <el-table-column
            prop="caseOppositeParties"
            label="对方当事人">
        </el-table-column>
        <el-table-column
            prop="cwInoutDate"
            label="收款日期">
        </el-table-column>
        <el-table-column
            prop="cwInoutMoney"
            label="收款金额">
        </el-table-column>
        <el-table-column
            prop="cwRemark"
            label="备注">
        </el-table-column>
      </el-table>
<br>
      <el-row >
        <el-col :span="24"><b>律师日期内创收提成</b></el-col>
      </el-row>
      <br>
      <el-table
          :summary-method="getSummaries"
          show-summary
          :data="tableData2"
          style="width: 100%"
      >
        <el-table-column
            prop=""
            label="承办律师"
            width="180">
          <template>
            {{userRealname}}
          </template>
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="caseWtr"
            label="委托人">
        </el-table-column>
        <el-table-column
            prop="caseOppositeParties"
            label="对方当事人">
        </el-table-column>

        <el-table-column
            prop="caseAgencyfee"
            label="创收金额">
        </el-table-column>
        <el-table-column
            prop="cwRealSplitMoney"
            label="实际提成">
        </el-table-column>

      </el-table>


    </div>


  </div>
</template>

<script>
export default {
  name: "CwInoutSHOURU",
  data(){
    return {
      showANDhidden:false , //控制下方页面是否显示
      userRealname:JSON.parse(localStorage["user"])[0].userRealname,//登陆者的名称
     gaocha:{
       sta:"",  //开始时间
       ends:"",//结束时间
       hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId,//登陆者的员工id

     },//存储第一个表的数据
      tableData:[],
//存储第二个表的数据
      tableData2:[]
    }
  },
  methods:{
    onsubmit(){
      if(this.gaocha.sta=='' &&this.gaocha.ends==''){alert("请选择时间")
        return;}
    else  if(this.gaocha.sta==''  ||this.gaocha.ends==''){alert("请选择正确的时间区间")
        return;}
      this.getlists();//显示数据信息
      this.showANDhidden=true;//控制下方页面是否显示

    },
    //近一个月
    yigeyue(){
      var ss=new Date();
      ss.setMonth(ss.getMonth()- 1);
      const d=this.$date.formatDate(new Date(ss),"yyyy-MM-DD") // hh:mm:ss
      this.gaocha.sta=d;
      this.gaocha.ends=this.$date.formatDate(new Date(),"yyyy-MM-DD")
      this.getlists();//显示数据信息
      this.showANDhidden=true;//控制下方页面是否显示

    },
    //近三个月
    sangeyue(){
     var ss=new Date();
     ss.setMonth(ss.getMonth()- 3);
      const d=this.$date.formatDate(new Date(ss),"yyyy-MM-DD") // hh:mm:ss
this.gaocha.sta=d;
      this.gaocha.ends=this.$date.formatDate(new Date(),"yyyy-MM-DD")
      this.getlists();//显示数据信息
      this.showANDhidden=true;//控制下方页面是否显示


    },
    //近半年
    bannian(){
      var ss=new Date();
      ss.setMonth(ss.getMonth()- 6);
      const d=this.$date.formatDate(new Date(ss),"yyyy-MM-DD") // hh:mm:ss
      this.gaocha.sta=d;
      this.gaocha.ends=this.$date.formatDate(new Date(),"yyyy-MM-DD")
      this.getlists();//显示数据信息
      this.showANDhidden=true;//控制下方页面是否显示


    },
    //近一年
    yinian(){
      var ss=new Date();
      ss.setMonth(ss.getMonth()- 12);
      const d=this.$date.formatDate(new Date(ss),"yyyy-MM-DD") // hh:mm:ss
      this.gaocha.sta=d;
      this.gaocha.ends=this.$date.formatDate(new Date(),"yyyy-MM-DD")
      this.getlists();//显示数据信息
      this.showANDhidden=true;//控制下方页面是否显示

    },
    //查询显示的数据
    getlists(){
      //第一个表
      this.$http.get(`cwInout/shouru`,{params:this.gaocha}).then(res=>{
               this.tableData=res.data.data;
      })
       ;
       //第二个表
      this.$http.get(`cwInout/shouruticheng`).then(res=>{
        this.tableData2=res.data.data;
      })
    },
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if(  sums[index]==0){return   sums[index]=""; }

          sums[index] += ' 元';
        } else {
          return;
        }

      });
      return sums;
    },
  }
}
</script>

<style scoped>

</style>